<template>
    <div id="oppo_detail">
        <div class="top">
            <!-- 审批步骤 -->
            <el-steps :space="200" :active="active" finish-status="success" :align-center="true" :simple="true">
                <el-step title="准备推进"></el-step>
                <el-step title="待批准"></el-step>
                <el-step title="同意"></el-step>
                <el-step title="开始推进"></el-step>
                <el-step title="签订"></el-step>
            </el-steps>
        </div>
        <!-- 合同详细情况 -->
        <div class="body">
            <el-row class="title">
                <el-col :span="4">销售机会</el-col>
                <el-col :span="12" :offset="8">
                    <el-button v-if="oppotunity.state.oppoStateId != 3" @click="editContract">编辑</el-button>
                    <el-button v-if="oppotunity.state.oppoStateId != 3" @click="deleteOppo">删除</el-button>
                    <el-button v-if="oppotunity.state.oppoStateId === 2" @click="checkContract">生成合同</el-button>
                    <el-button v-if="oppotunity.state.oppoStateId === 1" @click="keepOn">启动流程</el-button>
                    <el-button v-print="'#oppoPrint'">打印</el-button>
                </el-col>
            </el-row>
            <el-form
                    label-width="125px"
                    class="demo-ruleForm save_contract_form"
                    style="overflow:hidden;padding-top:20px;padding-left: 100px"
            >
                <el-form-item label="机会名称：" prop="name" class="inline__">
                    {{oppotunity.oppoName}}
                </el-form-item>
                <el-form-item label="对应客户：" prop="name" class="inline__">
                    {{oppotunity.customer?oppotunity.customer.customerName:"无"}}
                </el-form-item>
                <el-form-item label="总金额：" prop="name" class="inline__">
                    {{oppotunity?totalPrice:0}}
                </el-form-item>
                <el-form-item label="总盈利：" prop="name" class="inline__">
                    {{oppotunity?profit:"0"}}
                </el-form-item>
                <el-form-item label="添加时间：" prop="name" class="inline__">
                    {{oppotunity.stateDate?oppotunity.stateDate:"2000-00-00" | format_date}}
                </el-form-item>
                <el-form-item label="机会推进人：" prop="name" class="inline__">
                    {{oppotunity.worker?oppotunity.worker.empName:'无'}}
                </el-form-item>
                <el-form-item label="进入此状态时间：" prop="name" class="inline__">
                    {{oppotunity.nextContactTime?oppotunity.nextContactTime:"2000-00-00" | format_date}}
                </el-form-item>
                <el-form-item label="停滞此状态时间：" prop="name" class="inline__">
                    {{((new Date().getTime()-new Date(oppotunity.nextContactTime).getTime())/(1000*60*60*24)).toFixed(0) }}
                </el-form-item>
                <el-form-item label="当前机会状态：" prop="name" class="inline__">
                    {{oppotunity.state?oppotunity.state.oppoStateName:0}}
                </el-form-item>
                <el-form-item label="预计成交时间：" prop="name" class="inline__">
                    {{oppotunity.planIdealTime?oppotunity.planIdealTime:"2000-00-00" | format_date}}
                    <span v-if="new Date().getTime() > new Date(oppotunity.planIdealTime) && oppotunity.state.oppoStateId != 3" style="color: firebrick">已逾期！！！</span>
                    <span v-if="new Date().getTime() < new Date(oppotunity.planIdealTime) && oppotunity.state.oppoStateId != 3" style="color: firebrick">
                        倒计时  <span style="color: lawngreen">{{((new Date(oppotunity.planIdealTime).getTime() - new Date().getTime())/(1000*60*60*24)).toFixed(0)}} </span>
                        天
                    </span>
                </el-form-item>
                <el-form-item label="备注：" prop="name">
                    无
                </el-form-item>
            </el-form>
            <div v-if="watchPro" style="padding: 10px;">
                点击查看商品
                <el-button type="text" size="mini" @click="watchPro = false">
                    <i class="iconfont icon-jiahao" />
                </el-button>
            </div>
            <div :style="{'display':watchPro? 'none' : 'block'}">
                <el-table ref="multipleTable" :data="oppotunity.oppoProList" style="padding: 10px">
                    <el-table-column label="图片">
                        <template slot-scope="s">
                            <el-image :src="s.row.productDetail.proImgSrc" style="width:40px;height:40px;"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="productDetail.product.productName" label="名称"></el-table-column>
                    <el-table-column prop="abilities" label="规格属性">
                        <template slot-scope="s">
                            <span v-for="item in s.row.productDetail.abilities" :key="item.abilityId">{{item.abilityName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="productDetail.product.productBrand" label="品牌"></el-table-column>
                    <el-table-column label="数量">
                        <template slot-scope="scope">
                            <span>{{scope.row.productNum}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="原价">
                        <template slot-scope="s">
                            <span>{{s.row.productDetail.proPrice * 0.6}}元</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="报价">
                        <template slot-scope="scope">
                            <span>{{scope.row.offer}}元</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="单个盈利">
                        <template slot-scope="scope">
                            <span>{{scope.row.offer - scope.row.productDetail.proPrice*0.6}}元</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="总盈利">
                        <template slot-scope="scope">
                            <span>{{(scope.row.offer - scope.row.productDetail.proPrice*0.6) * scope.row.productNum}}元</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="padding: 10px;">
                    收起
                    <el-button type="text" size="mini" @click="watchPro = true">
                        <i class="iconfont icon-jiahao" />
                    </el-button>
                </div>
            </div>
        </div>
        <!-- 机会报价通过或者反对 -->
        <div class="project_show">
            <div v-if="oppotunity.state.oppoStateId === 5 && indexboolean">
                <el-row class="plan">
                    <el-input
                            type="textarea"
                            :rows="5"
                            placeholder="请输入内容"
                            v-model="bossReason">
                    </el-input>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="3">
                        <el-button type="primary" @click="passOffer">通过</el-button>
                    </el-col>
                    <el-col :span="3">
                        <el-button type="danger" @click="editOffer">驳回</el-button>
                    </el-col>
                </el-row>
            </div>
            <div v-else-if="oppotunity.state.oppoStateId === 2">
                <el-row class="plan bg_white">
                    <el-col>
                        已通过
                    </el-col>
                </el-row>
                <el-row class="bg_white">
                    <el-col>
                        {{oppotunity.state.oppoStateName}},{{oppotunity.sale_source}}
                    </el-col>
                </el-row>
            </div>
            <div v-else-if="oppotunity.state.oppoStateId === 4">
                <el-row class="plan bg_white">
                    <el-col>
                        被驳回 请修改
                    </el-col>
                </el-row>
                <el-row class="bg_white">
                    <el-col>
                        {{oppotunity.state.oppoStateName}},{{oppotunity.sale_source}}
                    </el-col>
                </el-row>
            </div>
            <div v-else-if="oppotunity.state.oppoStateId === 1">
                <el-row class="plan bg_white">
                    <el-col>
                        此机会未启动流程
                    </el-col>
                </el-row>
            </div>
            <div v-for="index in examList" :key="index.eoId" class="bg_white" style="margin-top: 5px;overflow: hidden;padding:10px">
                <el-col>
                    <div style="position: relative">
                        <!--行动对应的客户名及操作-->
                        <el-row type="flex" class="row-bg right_detail">
                            <!--客户名-->
                            <el-col v-if="index.result === 1">
                                通过
                            </el-col>
                            <el-col v-if="index.result === 2">
                                驳回
                            </el-col>
                        </el-row>
                    </div>
                    <div class="col_detail" style="padding:5px 10px 5px">
                        <div class="col_detail_con">
                            <span>
                                {{index.reason}}
                            </span>
                        </div>
                        <div style="height:20px;text-align: right">
                            {{index.emp.empName}}
                        </div>
                        <div class="col_detail_time">
                            {{index.examDate | format_date}}
                        </div>
                    </div>
                </el-col>
            </div>
        </div>
        <!--修改此机会-->
        <el-dialog
                title="销售机会"
                :visible.sync="saveOppoDialogVisible"
                width="60%">
            <add-oppoform ref="refSaveOppo"></add-oppoform>
        </el-dialog>
        <!-- 新增和修改合同的弹窗 -->
		<el-dialog title="合同" :visible.sync="savaContractDialogVisible" width="60%" top="5vh" destroy-on-close>
			<save-contract ref="refSaveContract"></save-contract>
		</el-dialog>
        <oppo-print :oppotunity="oppotunity" style="position: relative;z-index:-1;"></oppo-print>
    </div>
</template>

<script>
    import addOppoForm from "./add-oppoform.vue";
    import oppoPrint from "./print";
    export default {
        name: "OppoDetail",
        components: {
            'add-oppoform':addOppoForm,
            'save-contract': resolve => require(["../in_sale/save_contract"],resolve),				// 新增和修改组件标签
            'oppo-print':oppoPrint,
        },
        data(){
            return{
                saveOppoDialogVisible: false,  //机会新增和修改的弹窗控制开关
                savaContractDialogVisible:false,// 合同新增弹窗开关
                oppotunity:{},
                watchPro:true,
                bossReason:'',
                exam:{
                    oeId:0,
                    oppo:{},
                    emp:{},
                    examDate:new Date(),
                    result:1,
                    reason:'',
                },
                examList:{},
                indexboolean:true,
            }
        },
        methods:{
            //修改，编辑
            editContract(){
                this.saveOppoDialogVisible = true
                setTimeout(() => {
                    // 拷贝一个合同临时对象
                    let _oppotunity = this.global.copy_obj(this.oppotunity)
                    // 赋值对象
                    this.$refs.refSaveOppo.addOppoForm = _oppotunity
                }, 50);
            },
            //生成合同
            checkContract(){
                this.global.confirm("提示","是否将此机会变为合同？",
                    () => {
                        window.console.log(this.$router)
                        this.savaContractDialogVisible = true
                        this.$nextTick(function(){
                            this.$refs.refSaveContract.oppos.push(this.oppotunity)
                            this.$refs.refSaveContract.contract.oppo = this.global.copy_obj(this.oppotunity)
                            this.$refs.refSaveContract.addOppoToContract(this.oppotunity)
                            this.$refs.refSaveContract.isOppo = this // 一个标识，用于区分是在哪儿打开的合同新增
                        })


                       /*  this.oppotunity.state.oppoStateId = 3
                        //推进到当前阶段的时间
                        this.oppotunity.nextContactTime = new Date();
                        this.axios.post("api/oppo-sale/saveOppo",this.oppotunity).then().catch() */
                    },() => {
                        this.global.mes_message("取消")
                    })
            },
            //删除
            deleteOppo(){
                this.global.confirm("提示","删除此机会则视为灭活，是否删除？",
                    () => {
                        if(this.$store.state.user.empId != this.oppotunity.worker.empId && !this.indexboolean){
                            this.global.mes_error("你无权删除销售计划!")
                        }else{
                            this.axios.get("api/oppo-sale/deleteOppo",this.oppotunity.oppoId)
                                .then().catch()
                            this.$router.push('/oppo-index')
                        }
                    },() => {
                        this.global.mes_message("取消")
                })
            },
            //启动流程的方法
            keepOn(){
                this.global.confirm("提示","是否启动此销售机会的流程",
                    () => {
                        if(this.$store.state.user.empId != this.oppotunity.worker.empId){
                            this.global.mes_error("这不是你推进的销售计划，你无权启动流程!")
                        }else{
                            this.oppotunity.state.oppoStateId = 5
                            this.oppotunity.nextContactTime = new Date();
                            window.console.log(this.$store.state.user.empId)
                            window.console.log(this.oppotunity)
                            this.axios.post("api/oppo-sale/saveOppo",this.oppotunity)
                            .then(() => {
                                this.$router.push('/oppo-index')
                            }).catch()
                            
                        }
                    },() => {
                        this.global.mes_message("取消")
                        this.clearExam()
                    })
            },
            //合同通过的方法
            passOffer(){
                this.global.confirm("提示","是否通过这份销售机会",
                    () => {
                        this.oppotunity.state.oppoStateId = 2
                        this.oppotunity.saleSource = this.bossReason
                        this.oppotunity.nextContactTime = new Date();
                        this.exam.oppo = this.oppotunity
                        this.exam.emp = this.$store.state.user
                        this.exam.reason = this.bossReason
                        window.console.log(this.$store.state.user.empId)
                        window.console.log(this.oppotunity)
                        window.console.log(this.exam)
                        this.axios.post("api/oppo-sale/saveOppo",this.oppotunity)
                            .then(v=>{
                                window.console.log(v)
                            }).catch()
                        this.axios.post("api/oppo-sale/saveOExam",this.exam)
                            .then(res=>{
                                window.console.log(res)
                            }).catch()
                        this.clearExam()
                        this.findExam()
                    },() => {
                        this.global.mes_message("取消")
                        this.clearExam()
                    })
            },
            //合同不通过的方法
            editOffer(){
                this.global.confirm("提示","是否驳回这份销售机会",
                    () => {
                        this.oppotunity.state.oppoStateId = 4
                        this.oppotunity.saleSource = this.bossReason
                        this.oppotunity.nextContactTime = new Date();
                        this.exam.oppo.oppoId = this.oppotunity.oppoId
                        this.exam.emp.empId = this.$store.state.user.empId
                        this.exam.result = 2
                        this.exam.reason = this.bossReason
                        window.console.log(this.oppotunity)
                        window.console.log(this.exam)
                        this.axios.post("api/oppo-sale/saveOppo",this.oppotunity)
                            .then(v=>{
                                window.console.log(v)
                            }).catch()
                        this.axios.post("api/oppo-sale/saveOExam",this.exam)
                            .then(res=>{
                                window.console.log(res)
                            }).catch()
                        this.clearExam()
                        this.findExam()
                    },() => {
                        this.global.mes_message("取消")
                        this.clearExam()
                    })
            },
            clearExam(){
                this.exam ={
                    oeId:0,
                    oppoId:'',
                    emp:{},
                    examDate:new Date(),
                    result:1,
                    reason:'',
                }
            },
            findExam(){
                this.axios.get("api/oppo-sale/findOppoExam",{params:{"oppoId":this.oppotunity.oppoId}})
                    .then(v=>{
                        this.examList = v.data;
                    })
                    .catch(()=>{
                        this.global.mes_error("获取流程失败")
                    })
            },
            //查询此用户是否能审批
            findDuty(){
                this.axios.get("api/oppo-sale/findDuty",{params:{"empId":this.$store.state.user.empId}})
                    .then(v=>{
                        this.indexboolean = v.data;
                    }).catch()
            }
        },
        computed:{
            //总盈利
            profit(){
                let p = 0;
                this.oppotunity.oppoProList.forEach(pro=>{
                    p = p + (pro.productNum * (pro.offer - pro.productDetail.proPrice*0.6))
                });
                p = p.toFixed(2);
                return p;
            },
            //总金额
            totalPrice(){
                let t = 0;
                this.oppotunity.oppoProList.forEach(tol=>{
                    t = t + (tol.productNum * tol.offer);
                });
                return t;
            },
            active(){//步骤条的数据
                  let a = 0;
                  if (this.oppotunity.state.oppoStateId === 1 || this.oppotunity.state.oppoStateId === 4){
                      a = 0
                  }
                  else if(this.oppotunity.state.oppoStateId === 2){
                      a = 4
                  }
                  else if(this.oppotunity.state.oppoStateId === 3){
                      a = 5
                  }
                  else if(this.oppotunity.state.oppoStateId === 5){
                      a = 1
                  }
                  return a
            },
        },
        created:function(){
            this.oppotunity = JSON.parse(sessionStorage.getItem("oppotunity"));
            sessionStorage.removeItem("oppotunity");
            this.findExam();
            this.findDuty();
        },
        /* 路由守卫，拦截没有合同对象而直接进入 */
        beforeRouteEnter (to, from, next){
            if (sessionStorage.getItem("oppotunity")){
                next()
            }else{
                next({path:"/oppo-index"})
            }
        }
    }
</script>

<style scoped>
    #oppo_detail{margin: 0 auto; width: 1000px;}
    #oppo_detail .top{margin: 0 auto;width: 100%}
    .top .el-steps {background-color: #e9eef3}
    .top .el-row{margin: 10px auto}
    .top .el-row .el-col{text-align: center}
    .top .el-row .el-col .el-button{background: transparent}
    .body{background-color: #ffffff;width: 100%;}
    .save_contract_form .el-form-item{width: 100%;margin-bottom: 22px !important;}
    .inline__{width:50%!important;display:inline-block;}
    .title{border-bottom: 1.5px solid #ababab;margin:0 10px}
    .title .el-col{padding: 10px;font-size: 16px;line-height: 60px;}
    .plan{margin-top: 10px;}
    .record{margin-top: 10px;}
    .bg_white{padding: 15px;background-color:white;}
    .col_font{line-height: 35px;margin-left: 7px}
    .right_detail{border-bottom: 1px solid rgb(217,217,217); margin-right: 10px}
    /*下拉菜单样式*/
    .el-dropdown-link {
        cursor: pointer;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    /*右边行动详情的大样式*/
    .col_detail{margin-right: 25px;margin-left: 10px}
    .col_detail_con{height: 120px;}
    .col_detail_time{height:20px;text-align: right}
    .col_detail_set{height:40px;}
</style>